<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>条件渲染</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
         <div v-if="type === 'A'">A</div>
         <div v-else-if="type === 'B'">B</div>
         
         <div v-else-if="type === 'C'">C</div>
         <div v-else>NOT A\B\C 😊😊😊</div>
         <h4 v-show="seen">v-show指令的表达式返回真时:会改变display的css属性值为display显示在页面</h4>

         <div style="font-size: 20px;">
          <p>v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区域内的事件监听器和子组件都会被销毁与重建</p>
          <p>v-if 也是惰性的：如果在初次渲染时条件值为false，则不会做任何事。条件区块只有当条件首次变为true时才会被渲染</p>
          <p>相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display属性会被切换</p>
          <p>总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好</v-show></p>
        
        
        </div>
       </div>

    </body>
    <script>
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                  type: 'A',
                  seen: false,
              }
           }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>